<template>
  <div class="content">
    <div v-if="anaClass == 0" class="Box">
      <div v-if="role == 0">
        <div class="infoBox">
          <span class="font">班级ID：</span>
          <el-input v-model="inputClassId"></el-input>
          <div class="buttonBox">
            <el-button type="primary" @click="JoinClass">加入班级</el-button>
          </div>
        </div>
    </div>
    <div v-else-if="role == 1">
      <div v-if="anaClass == 0" class="Box">
        <div class="infoBox">
          <span class="font">班级名称：</span>
          <el-input v-model="inputClassName"></el-input>
          <div class="buttonBox">
            <el-button type="primary" @click="CreateClass">创建班级</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div v-else-if="anaClass == 1" class="Box1">
      <div class="infoBox">
        <div class="infoBox1">
          <span class="font">班级&ensp;ID&ensp;：</span>
          <span class="font1">{{classId}}</span>
        </div>
        <div class="infoBox1">
          <span class="font">班级名称：</span>
          <span class="font1">{{className}}</span>
        </div>
      </div>
      <div class="buttonOut">
        <div class="buttonBox1">
          <el-button type="primary" @click="ExitClass">退出班级</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../../util/http';

export default {
  data() {
    return {
      role: window.localStorage.getItem('userRole'),
      anaClass: '',
      inputClassId: '',
      inputClassName: '',
      classId: '',
      className: '',
    };
  },
  methods: {
    JudgeClassId() {
      if (window.localStorage.getItem('userClassId') === 'null' ||
          window.localStorage.getItem('userClassId') === '') {
        this.anaClass = 0;
      } else {
        this.anaClass = 1;
        http.get(`/studentAPI/getClassMessageById?class_id=${window.localStorage.getItem('userClassId')}`)
        .then((res) => {
          this.classId = res.resultMap.getClassMessageById.class_id;
          this.className = res.resultMap.getClassMessageById.name;
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
    CreateClass() {
      if (this.inputClassName === '') {
        this.$message.error('班级名称不能为空');
      } else {
        http.post(`/classAPI/addClassMessage?name=${this.inputClassName}
          &comm_id=${window.localStorage.getItem('userId')}`)
        .then((res) => {
          this.$message({
            message: '创建班级成功！',
            type: 'success',
          });
          console.log(res.resultMap.addClassMessage.class_id);
          window.localStorage.setItem('userClassId', res.resultMap.addClassMessage.class_id);
          this.JudgeClassId();
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error);
        });
      }
    },
    JoinClass() {
      if (this.inputClassId === '') {
        this.$message.error('班级ID不能为空');
      } else {
        http.put(`/studentAPI/addClass?id=${window.localStorage.getItem('userId')}
          &class_id=${this.inputClassId}`)
        .then((res) => {
          window.localStorage.setItem('userClassId', res.data.resultMap.addClass.class_id);
          this.$message({
            message: '加入班级成功！',
            type: 'success',
          });
          this.JudgeClassId();
          this.inputClassId = '';
        })
        .catch((error) => {
          console.log(error);
          this.$message.error('请输入正确的班级ID');
        });
      }
    },
    ExitClass() {
      this.$confirm('是否退出当前班级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (window.localStorage.getItem('userRole') === '1') {
          this.$notify({
            title: '警告',
            message: '学委不能退出班级，先转让学委权限',
            duration: 0,
          });
        } else {
          http.put(`/studentAPI/exitClass?id=${window.localStorage.getItem('userId')}`)
          .then((res) => {
            window.localStorage.setItem('userClassId', '');
            this.$message({
              type: 'success',
              message: '退出班级成功!',
            });
            this.JudgeClassId();
            }).catch((error) => {
              this.$message.error('退出班级失败！');
              console.log(error);
            });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消!',
        });
      });
    },
  },
  mounted() {
    this.JudgeClassId();
  },
};
</script>

<style scoped>
.content{
  /* background-color: yellow; */
  width: 23rem;
  height: 11rem;
  border: .03rem solid #ccc;
  border-left:none;
  border-right:none;
  border-bottom:none;
}
.Box{
  margin: 1.4rem auto;
  width: 16rem;
  height: 8rem;
  /* background-color: red; */
}
.Box1{
  margin: 1.6rem auto;
  width: 12rem;
  height: 8rem;
}
.infoBox{
  /* background-color: yellow; */
  width: 14rem;
  height: 3rem;
  padding: 1rem 0 1rem 2.5rem;
}
.infoBox1{
  /* background-color: green; */
  width: 8rem;
  height: 1rem;
  margin: 0 0 .7rem 0;
}
.font{
  color: #66cccc;
  font-size: .5rem;
}
.font1{
  color: #FAACA8;
  font-size: .5rem;
}
.el-input {
  width: 5rem;
  height: 10%;
}
.buttonBox{
  float: right;
  margin: 0rem 3rem 0 0;
}
.buttonBox1{
  float: left;
  margin: 0 1rem 0 0;
}
.buttonOut{
  margin: 0 0 0 3.7rem;
}
.el-button {
  background-color: #66cccc;
  width: 3rem;
	color: white;
  border:#66cccc;
}
.el-button:hover {
  background-color: #FAACA8;
}
</style>
